<template>
  <div>
    <basic-container>
         <!-- <div class="maskMenu" v-if="showPullMenu" @click="handerror()">

    </div>
    <div class="pull_menu" v-if="showPullMenu">
      <div class="menu_box_top border-bottom">
        <span>{{$route.query.name}}</span>
        <em @click="handerror()"><img src="/img/index/close.png" alt=""></em>
      </div>
          <iframe
        v-if="$route.query.src"
        ref="iframe"
        :src="$route.query.src"
        class="iframe"/>
      <iframe
        v-else
        ref="iframe"
        :src="urlPath"
        class="iframe"/>
     
    </div> -->
    
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
export default {
  name: 'AvueIframe',
  components: {
    ...mapGetters(['screen'])
  },
  props: ['routerPath'],
  data() {
    return {
      urlPath: this.getUrlPath(), // iframe src 路径
     // showPullMenu:true,
    }
  },
  watch: {
    $route: function() {
      // this.showPullMenu=true
     // this.load()
   //  console.log()
      var tempwindow=window.open('_blank');
      tempwindow.location=this.$route.query.src
    },
    routerPath: function() {
      // 监听routerPath变化，改变src路径
      this.urlPath = this.getUrlPath()
     // window.localStorage.href=this.urlPath
      var tempwindow=window.open('_blank');
      tempwindow.location=this.$route.query.src
    
    }
  },
  created() {
    var tempwindow=window.open('_blank');
      tempwindow.location=this.$route.query.src
  //  NProgress.configure({ showSpinner: false })
  },
  mounted() {
    //this.load()
    this.resize()
  },
  methods: {
    handerror(){
      this.showPullMenu=false
    },
    // 显示等待框
    show() {
      NProgress.start()
    },
    // 隐藏等待狂
    hide() {
      NProgress.done()
    },
    // 加载浏览器窗口变化自适应
    resize() {
      window.onresize = () => {
        this.iframeInit()
      }
    },
    // 加载组件
    load() {
      this.show()
      var flag = true // URL是否包含问号
      if (this.$route.query.src.indexOf('?') === -1) {
        flag = false
      }
      var list = []
      for (var key in this.$route.query) {
        if (key !== 'src' && key !== 'name') {
          list.push(`${key}= this.$route.query[key]`)
        }
      }
      list = list.join('&').toString()
      if (flag) {
        this.$route.query.src = `${this.$route.query.src}${
          list.length > 0 ? `&list` : ''
        }`
      } else {
        this.$route.query.src = `${this.$route.query.src}${
          list.length > 0 ? `?list` : ''
        }`
      }
      // 超时5s自动隐藏等待框，加强用户体验
      let time = 5
      const timeFunc = setInterval(() => {
        time--
        if (time === 0) {
          this.hide()
          clearInterval(timeFunc)
        }
      }, 1000)
      this.iframeInit()
    },
    // iframe窗口初始化
    iframeInit() {
      const iframe = this.$refs.iframe
      const clientHeight = document.documentElement.clientHeight - (screen > 1 ? 200 : 130)
      iframe.style.height = `${clientHeight}px`
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          this.hide()
        })
      } else {
        iframe.onload = () => {
          this.hide()
        }
      }
    },
    getUrlPath: function() {
      // 获取 iframe src 路径
      let url = window.location.href
      url = url.replace('/myiframe', '')
      return url
    },
  }
}
</script>

<style lang="scss">
// .iframe {
//   width: 100%;
//   height: 95% !important;
//   border: 0;
//   overflow: hidden;
//   box-sizing: border-box;
// }
//   .maskMenu {
//   position: fixed;
//   width: 100%;
//   height: 100%;
//   z-index: 999;
//   background: rgba(0, 0, 0, 1);
//   opacity: 0.4;
//   top: 0px;
//   left: 0;
// }
//   .pull_menu{
//           width: 95%;
//     height: 90%;
//     top: 5%;
//     background: #fff;
//     position: fixed;
//     z-index: 1026;
//     padding:  20px;
//     border-radius: 10px;
//     left: 2.5%;
  
//      .menu_box_top {
//     height: 30px;
//     line-height: 30px;
//     margin-bottom: 0.48rem;
//     // border-bottom: 1px solid #ccc;
//     span {
//       // font-size: 0.32rem;
//       font-family: "PingFangSC-Medium";
//       color: #363c54;
//       float: left;
//       margin-left: 0.5rem;
//     }
//     em {
//       width: 22px;
//       height: 22px;
//       float: right;
//       font-size: 20px;
//       cursor: pointer;
//       // background: url('../')
//       // background-image: url("../../../public/img/bg/cloud.jpg");
//       // background-size: cover;
//       // margin-top: 18px;
//       margin-right: 0.5rem;
//         img{
//               width: 100%;
//         }
//       }
//     }
//   }
</style>
